<template>
	<view>
		<view class="flex space alcenter mb30">
			<view class="flex alcenter">
				<image class="unio2o-store-logo" :src="coupon.store.logo"></image>
				<view class="ml20 ft16 text-default">
					{{coupon.store.name}}
				</view>
			</view>
			<view class="ft14 text-notice">
				<text>距我</text>
				<text class="text-theme">{{coupon.store.distance}}</text>
			</view>
		</view>

		<view class="unicard-coupon box-shadow pd30 mt20 bg-w  bdr16">
			<view class="flex alcenter pb30 bdb1">
				<text class="ft20 ftw600 text-default ml20">{{coupon.title}}</text>
			</view>

			<view class="flex space mt30 alcenter">
				<text class="ft14 text-notice">{{coupon.description}}</text>
				<view class="unicard-tag-use">{{coupon.discount}}</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			coupon: {
				type: Object,
				default: () => {
					return {

					}
				}
			}
		},
		data() {
			return {

			}
		},
	}
</script>

<style>
	.unicard-money-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.unicard-tag-use {
		background: linear-gradient(90deg, rgba(241, 226, 201, 1) 0%, rgba(243, 187, 110, 1) 100%);
		height: 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 8rpx;
		color: #764E18;
	}

	.unicard-coupon {
		border-left: 10rpx solid #FF6D00;
	}

	.unicard-coupon .bdb1 {
		border-bottom: 2rpx dashed #FF6D00;
	}
</style>